import * as twgl from "../lib/twgl-full.module.js";

const gl = document.querySelector("#canvas").getContext("webgl");
const programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);

// 顶点信息
const arrays = {};
const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

// uniform变量
const uniforms = {};

function render() {
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  // 深度检测和三角形正反面
  gl.enable(gl.DEPTH_TEST);
  gl.enable(gl.CULL_FACE);
  // 清除绘制信息和深度信息
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  /**
   * 每次渲染需要进行计算的矩阵处理
   */

  // 绘制和设置相关信息
  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  twgl.setUniforms(programInfo, uniforms);
  gl.drawElements(gl.TRIANGLES, bufferInfo.numElements, gl.UNSIGNED_SHORT, 0);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);
